<template>
  <div id="app">
    <!-- 一级路由的出口，路由表中所有的顶层路由都是一级路由
      因为 router-view 是一级路由出口
      keep-alive 仅对该路由出口渲染的组件有效
    -->
    <keep-alive :include="cachePages">
      <router-view/>
    </keep-alive>
    <van-overlay :show="show">
      <div class="error">
        <h2>
          设备与网页不兼容,请<b>F12打开模拟器</b>,然后再刷新!
        </h2>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['cachePages'])
  },
  mounted () {
    // 电脑预览
    if (this.isMobile()) {
      // 移动端
      // this.$router.replace('/')
      this.show = false
    } else {
      // const ensure = confirm('该网页仅支持移动端预览,确认即进入该项目PC端!!!')
      // if (ensure) {
      // window.location.href = 'http://chenlong1999.gitee.io/news-cli-pc'
      // } else {
      //   this.$router.replace('/error')
      // }
      // this.$router.replace('/error')
      this.show = true
    }
  },
  methods: {
    isMobile () {
      const flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      localStorage.setItem('ismobile', flag ? 1 : 0)
      return flag
    }
  }
}
</script>

<style lang="less">
.error{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  h2{
    color: #eee;
    letter-spacing: 2px;
    font-size: 12px;
    cursor: pointer;
    b{
      font-size: 14px;
      background: center rgb(236, 201, 149) url(./assets/error.gif);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-user-drag: none;
    }
  }
}
</style>
